<template>
	<div class="page-container">
		<!--新增编辑界面-->
		<el-dialog :title="add ? '物料入库单新增' : '物料入库单编辑'" width="90%" :visible.sync="dialogVisible" custom-class="myHeadClass"
			:close-on-click-modal="false" @opened="getDetials" :before-close="handleClose">

			<div class="addDiv" style="float:left;">
				<el-form :model="subDataForm" label-width="80px" :inline="true" :rules="dataFormRules" ref="dataForm"
					size="mini" label-position="right">
					<el-form-item label="ID" prop="id" v-if="false">
						<el-input v-model="subDataForm.id" disabled="true" auto-complete="off"></el-input>
					</el-form-item>

					<el-form-item :label="$t('field.do.doNo')" prop="doNo">
						<el-input v-model="subDataForm.doNo" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item :label="$t('field.do.batchNo')" prop="batchNo">
						<el-input v-model="subDataForm.batchNo" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item :label="$t('field.do.remark')" prop="remark">
						<el-input v-model="subDataForm.remark" auto-complete="off"></el-input>
					</el-form-item>

					<s-dict-form :max=10 :key="subDataForm.doType" name="doType" :value="subDataForm.doType"
						v-model="subDataForm.doType" />

				</el-form>
			</div>


			<div class="app-container">
				<el-table v-loading="listLoading" :key="componentKey" :data="dto.detList" height="350" border fit
					highlight-current-row style="width: 100%" size="mini">
					<el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
						<template slot-scope="scope"> {{ scope.$index + 1 }} </template>
					</el-table-column>
					<el-table-column class-name="status-col" :label="$t('field.itemName')" min-width="110" prop="itemId"
						align="center" header-align="center" :formatter="itemFilter">

					</el-table-column>
					<el-table-column width="100px" :label="$t('field.planCount')" align="center" header-align="center">
						<template slot-scope="{row}">
							<template v-if="row.edit">
								<el-input v-model="row.planCount" class="edit-input" size="mini" />
							</template>
							<span v-else style="cursor: pointer;">{{ row.planCount }}</span>
						</template>

					</el-table-column>

					<el-table-column width="100px" label="单位" align="center" header-align="center">
						<template slot-scope="{row}">
							<template v-if="false">
								<s-dict-select name="units" v-model="row.unit" />
							</template>
							<span v-else style="cursor: pointer;" v-for="(item, index) in units">
								<span v-if="item.value == row.unit">{{ item.label }}</span>
							</span>
						</template>
					</el-table-column>

					<column prop="activeCount" label="明细" width="80" />
					<column prop="finshCount" label="完成" width="80" />
					<column prop="cv" label="实时" width="80" :formatter="cvFormat" />
					<el-table-column align="center" :label="$t('action.edit')" width="80" fixed="right">
						<template slot-scope="scope">
							<el-button v-if="scope.row.edit" type="text" size="mini" @click="tableChange(scope.row)">
								{{ $t('action.comfirm') }}
							</el-button>
							<el-button v-else type="text" size="mini" @click="tableChange(scope.row)">
								{{ $t('action.edit') }}
							</el-button>
						</template>
					</el-table-column>

					<el-table-column :label="$t('action.operation')" width="205" fixed="right" header-align="center"
						align="center">
						<template slot-scope="scope">
							<kt-button label="组盘" perms="doi:item:edit" v-if="scope.row.id > 0"
								@click="handleZupan(scope.$index, scope.row)" />
							<kt-button label="查看" perms="doi:item:edit" v-if="scope.row.id > 0"
								@click="handleKc(scope.$index, scope.row)" />
							<kt-delete-button v-if="scope.row.activeCount == 0" perms="doo:item:delete"
								@click="handleDelete(scope.$index, scope.row)" />
							<kt-delete-button v-else perms="doo:item:delete"
								@click="handleDelete(scope.$index, scope.row)" />
						</template>
					</el-table-column>

				</el-table>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click.native="submitForm" :loading="editLoading">{{ $t('action.submit') }}</el-button>
				<el-button size="mini" @click.native="handleAddDetailEdit">增加明细 </el-button>
			</div>

		</el-dialog>
		<item-select :itemDialogVisible="itemDialogVisible" @handleSelect="handleSelect"
			@itemHidden="itemHidden"></item-select>
		<core-stock-Det :detDialogVisible="zpVisible" :editCount=true :itemId=editRow.itemId @myClose="detClose"
			:batchNo=subDataForm.batchNo @onSubmitForm="zp" />


		<el-dialog :title="kcTitle" width="40%" :visible.sync="kcVisible" :close-on-click-modal="true">
			<div class="gk-layout-container">
				<div class="gk-layout-main">
					<el-table :data="kcPageResult.content" class='gk-main-table' height="500" size="mini" align="left"
						style="width:100%;">
						<el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
							<template slot-scope="scope"> {{ scope.$index + 1 + kcFilters.pageSize * (kcFilters.pageNum - 1)
							}}
							</template>
						</el-table-column>
						<column prop="countDb" label="数量" />
						<column prop="boxCode" label="托盘码" />
						<column prop="locId" label="位置" />
					
						<column prop="status" label="状态" :formatter="selectionFormat" />
						<column prop="createTime" label="入库时间" width="180" />
					</el-table>
				</div>
				<!--分页栏-->
				<div class="toolbar gk-layout-footer" style="padding:10px;">
					<el-pagination layout="total, prev, pager, next, jumper" @current-change="kcFindPage"
						style="float:right;" :current-page="kcFilters.pageNum" :page-size="kcFilters.pageSize"
						:total="kcPageResult.totalSize">
					</el-pagination>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>

import KtButton from "@/views/Core/KtButton"
import { format } from "@/utils/datetime"
import Column from "@/views/Core/Column"
import SDictForm from "@/components/Kj/SDictForm"
import { dictsFormat, getItemName, getItem } from "@/utils/myUtil"
import SDictSelect from "@/components/Kj/SDictSelect"
import ItemSelect from "@/views/Basic/Material/ItemSelect"
import KtDeleteButton from "@/views/Core/KtDeleteButton"
import CoreStockDet from "@/dialog/CoreStockDet"
export default {
	name: 'Doi',
	components: {
		SDictSelect,
		KtButton,
		ItemSelect, SDictForm,
		Column,
		KtDeleteButton,
		CoreStockDet
	},

	props: {

		subDataForm: {
			type: Object
		},
		dialogVisible: {

			type: Boolean
		},
		add: {
			type: Boolean
		}
	},

	data() {
		return {
			size: 'mini',
			kcTitle: "",
			kcVisible: false,
			kcFilters: { pageSize: 6, pid: -1 },
			kcPageResult: {},

			listLoading: false,
			dto: { detList: [], deleteIds: [] },
			zpVisible: false,

			units: [],
			editRow: {},
			pageResult: {},
			componentKey: 0,
			editLoading: false,

			itemDialogVisible: false,

			
		}
	},
	computed: {
		dataFormRules() {
			const dataFormRules = {

				doNo: [{ required: true, message: "请输入单据号", trigger: 'blur' }],

				batchNo: [{ required: true, message: "请输入批号", trigger: 'blur' }]
			};
			return dataFormRules;
		},

		zpFormRules() {
			const zpFormRules = {
				countDb: [{ required: true, message: "请输入组盘数量", trigger: 'blur' }]
			};
			return zpFormRules;
		}
	},
	methods: {
		itemFilter: function (row, column, cellValue, index) {
			return getItemName(cellValue)
		},

		handleDelete: function (index, row) {
			if (row.id > 0) {
				this.dto.deleteIds.push(row.id)
			}
			this.dto.detList.splice(index, 1)

		},
		handleRemove: function (index, row) {
			if (row.id > 0) {
				this.dto.deleteIds.push(row.id)
			}
			this.dto.detList.splice(index, 1)

		},
		handleZupan: function (index, row) {
			this.editRow = row;
			this.zpVisible = true;
		},
		zp: function (d) {
			d.doiDetId = this.editRow.id;
			d.status = 3
			this.$api.coreStockDet.saveStockDet(d).then((res) => {
				if (res.code == 200) {
					this.$message({ message: res.data, type: 'success' })
					this.zpVisible = false;
					//this.$set(this.editRow, 'activeCount', d)
					this.getDetials();
				} else {
					this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
				}

			})
		},
		detClose: function () {
			this.zpVisible = false;
		},
		handleKc: function (index, row) {
			var item = getItem(row.itemId);
			this.kcTitle = item.n + "-" + item.g
			this.kcFilters.doiDetId = row.id;
			this.kcFindPage(1)

		},

		kcFindPage: function (data) {
			this.kcFilters.pageNum = data
			this.$api.coreStockDet.findDetailPage(this.kcFilters).then((res) => {
				this.kcPageResult = res.data
				this.kcVisible = true;
			})
		},
		cvFormat: function (row, column, cellValue, index) { 
			return cellValue==0?"":"待更新"
		},

		selectionFormat: function (row, column, cellValue, index) {

			return dictsFormat("storeStatus", cellValue)
		},
		handleSelect: function (data) {

			for (var i = 0; i < data.length; i++) {
				this.dto.detList.push({ itemId: data[i].id, unit: data[i].unit, edit: false });
			}
			this.itemHidden();
		},

		dictColumn: function (row, column, cellValue, index) {
			return dictsFormat("units", row.unit)
		},
		handleClose: function (done) {
			this.dto = { detList: [], deleteIds: [] };
			this.$emit('receiptHidden', {})
			done();
		},
		itemHidden: function () {
			this.itemDialogVisible = false;
		},
		// 获取分页数据
		getDetials: function () {
			if (this.subDataForm == undefined || this.subDataForm.id == undefined || this.subDataForm.id == 0) {
				return;
			}
			this.listLoading = true
			this.$api.doi.getDetials(this.subDataForm).then((res) => {
				const items = res.data;
				this.dto.detList = items.map(v => {
					this.$set(v, 'edit', false)
					return v
				})
				this.listLoading = false
				//this.componentKey += 1;
			})
		},

		tableChange: function (row) {
			row.edit = !row.edit;
			//this.componentKey += 1;

		},
		handleAddDetailEdit: function () {
			//this.componentKey += 1;
			this.itemDialogVisible = true

		},
		handleHiddenOut: function (params) {
			this.$emit('receiptHidden', {})
		},


		// 编辑
		submitForm: function () {
			if (this.subDataForm.status == 2 || this.subDataForm.status == 3) {
				this.$message({ message: "入库单非待执行状态无法修改", type: 'error' })
			}
			else {

				this.$refs.dataForm.validate((valid) => {
					if (valid) {
						this.$confirm(this.$t('action.isConfirm'), this.$t('action.tips'), {}).then(() => {
							this.editLoading = true
							this.dto.main = this.subDataForm;
							this.dto.main.outType = 2000;
							this.$api.doi.saveDoo(this.dto).then((res) => {
								this.editLoading = false
								if (res.code == 200) {

									this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
									this.handleHiddenOut();

								} else {
									this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
								}

							})
						})
					}
				})
			}
		}



	},
	created() {
		var d = this.$store.state.dict;

		this.units = d.dicts["units"];
	}
}
</script>

<style scoped>
.myHeadClass .el-dialog__header {
	background-color: #ff00ff !important;
	;
}
</style>